<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数</title>
</head>
<body>
    <input type="text" id="i1" placeholder="请输入1-100之间的数">
    <input type="button" style="height: 20px;width: 50px;" value="猜一猜" onclick="guess()">
    <div></div>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let x = parseInt(Math.random()*100)+1;
        let times=0;
        //js版本
        function guess() {
            let num = document.querySelector("#i1");
            let d = document.querySelector("div");
            times += 1;
            if(num.value==x) {
                d.innerText = "猜对了!";
                alert("恭喜您在第"+times+"次猜对了!");
            }else if(num.value<x){
                d.innerText = "猜小了!";
            }else {
                d.innerText = "猜大了";
            }
        }

    </script>
</body>
</html>